import { defineConfig, toEscapedSelector as e, presetUno } from 'unocss'
// import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...UnoCSS options
  rules: [
    [
      /^custom-hover$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector} {
  display: flex;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  align-items: center;
  transition: background var(--transition-time-02);
}
/* you can have multiple rules */
${selector}:hover {
  background-color: var(--top-header-hover-color);
}
.dark ${selector}:hover {
  background-color: var(--el-bg-color-overlay);
}
`
      }
    ],
    [
      /^layout-border__left$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector}:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: var(--el-border-color);
  z-index: 3;
}
`
      }
    ],
    [
      /^layout-border__right$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector}:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--el-border-color);
  z-index: 3;
}
`
      }
    ],
    [
      /^layout-border__top$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector}:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--el-border-color);
  z-index: 3;
}
`
      }
    ],
    [
      /^layout-border__bottom$/,
      ([], { rawSelector }) => {
        const selector = e(rawSelector)
        return `
${selector}:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--el-border-color);
  z-index: 3;
}
`
      }
    ]
  ],
  // presetUno未unocss内置的预设
  // dark: 'class'，配置'暗黑模式'的行为，class：通过dark类名来控制暗黑模式，页面根元素需要添加/移除dark类型来启停暗黑模式，<html class="dark">
  // attributify: false，配置是否启用'属性话模式'，若启用，则<div text="center" bg="blue-500" p="4">，相当于<div class="text-center bg-blue-500 p-4">，不启用则需要按照标准class属性值写法
  presets: [presetUno({ dark: 'class', attributify: false })],
  // transformerVariantGroup() 是 UnoCSS 提供的一个内置变换器插件，它的主要作用是：支持 分组变体语法（variant groups），可以将具有相同变体的多个类名写在一起，简化类名的书写。
  // 不使用 transformerVariantGroup() 的例子：<div class="hover:bg-red-500 hover:text-white sm:bg-blue-500 sm:text-black">
  // 使用 transformerVariantGroup() 后的简化写法：<div class="hover:(bg-red-500 text-white) sm:(bg-blue-500 text-black)">
  // 工作原理: 启用 transformerVariantGroup() 后，UnoCSS 会识别类似 hover:(bg-red-500 text-white) 这样的语法，自动展开为常规的类名：hover:bg-red-500 hover:text-white。
  // transformers: [transformerVariantGroup()],
  shortcuts: {
    'wh-full': 'w-full h-full'
  }
})
